<template>
	<view class="bw_home">
		<view class="index_top_bg">
			<swiper :current="tabIndex" class="swiper-box" @change="changTab">
				<swiper-item class="swiper-item">
					<view class="home-top-card">
						<view class="htc-info-wrapper">
							<view class="htc-coin-desc">
								<image src='/static/image/home/bitcoin.png' mode="aspectFill"></image>
								<view class="htc-coin-name-text">
									<text class="text-medium">Bitcoin</text>
									<text class="text-small" style="color:#BBBBBB;">BTC</text>
								</view>
							</view>
							<view class="htc-coin-quotation" :class="[btcInfo.price-btcInfo.openingPrice>0?'quotation-increase':btcInfo.price-btcInfo.openingPrice===0?'':'quotation-decrease']">
								<text class="text-small">
									${{btcInfo.price}}
									<span class="quotation-change-percentage">{{((btcInfo.price-btcInfo.openingPrice)/btcInfo.openingPrice*100).toFixed(2)+'%'}}</span>
								</text>
								<text class="text-small">
									<view class="quotation-arrow">
										<view class='quotation-arrow-top'></view>
										<view class='quotation-arrow-body'></view>
										{{btcInfoChange.toFixed(2)}}
									</view>
								</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="home-top-card">
						<view class="htc-info-wrapper">
							<view class="htc-coin-desc">
								<image src='/static/image/home/ethereum.png' mode="aspectFill"></image>
								<view class="htc-coin-name-text">
									<text class="text-medium">Ethereum</text>
									<text class="text-small" style="color:#BBBBBB;">ETH</text>
								</view>
							</view>
							<view class="htc-coin-quotation">
								<text class="text-small" :class="[ethInfo.price-ethInfo.openingPrice>0?'quotation-increase':ethInfo.price-ethInfo.openingPrice===0?'':'quotation-decrease']">${{ethInfo.price}}</text>
								<text class="text-small">{{ethInfoChange.toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="home-top-card">
						<view class="htc-info-wrapper">
							<view class="htc-coin-desc">
								<image src='/static/image/home/ltc.png' mode="aspectFill"></image>
								<view class="htc-coin-name-text">
									<text class="text-medium">Litecoin</text>
									<text class="text-small" style="color:#BBBBBB">LTC</text>
								</view>
							</view>
							<view class="htc-coin-quotation">
								<text class="text-small" :class="[ltcInfo.price-ltcInfo.openingPrice>0?'quotation-increase':ltcInfo.price-ltcInfo.openingPrice===0?'':'quotation-decrease']">${{ltcInfo.price}}</text>
								<text class="text-small">{{ltcInfoChange.toFixed(2)}}</text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="bw_swiper general_info_swiper">
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			btcInfoChange() {
				return this.btcInfo.price - this.btcInfo.openingPrice
			},
			ethInfoChange() {
				return this.ethInfo.price - this.ethInfo.openingPrice
			},
			ltcInfoChange() {
				return this.ltcInfo.price - this.ltcInfo.openingPrice
			}
		},
		data() {
			return {
				tabIndex: 0,
				getCoinInfoTimer: null,
				// 更新价格数据时间间隔
				updateCoinInfoInterval: 1000,
				btcInfo: {
					openingPrice: 9000,
					price: 9002.20
				},
				ethInfo: {
					openingPrice: 12000,
					price: 11999.10
				},
				ltcInfo: {
					openingPrice: 3120,
					price: 3122
				},
			}
		},

		methods: {
			changTab(e) {
				let index = e.target.current || e.detail.current;
				this.changeTabIndex(index);
			},
			changeTabIndex(index) {
				this.tabIndex = index;
			},

			// 随机突变
			randomCoinValue() {
				let base = Math.random() / 10
				let randomChange = 0


				if (Math.random() >= 0.9) {
					randomChange = Math.random()
				}

				console.log('randomChange', randomChange)
				console.log('result', base + randomChange)

				if (Math.random() > 0.5) {
					return -(base + randomChange)
				} else {
					return (base + randomChange)
				}

			},

			// 获取电子货币详情
			getCoinInfo() {
				let random1 = this.randomCoinValue()
				// let random2 = this.randomCoinValue()
				// let random3 = this.randomCoinValue()

				this.btcInfo.price = +(this.btcInfo.price + random1).toFixed(2)
				// this.ethInfo.price = this.ethInfo.price + random2
				// this.ltcInfo.price = this.ltcInfo.price + random3

				console.log(this.btcInfo.price)
				// uni.request({
				// 	// url: 'https://apiv2.bitcoinaverage.com/indices/global/ticker/BTCUSD',
				// 	url: 'https://sochain.com/api/v2/get_price/BTC/USD',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.btcInfo = res.data
				// 	}
				// })

				// uni.request({
				// 	// url: 'https://apiv2.bitcoinaverage.com/indices/global/ticker/ETHUSD',
				// 	url: 'https://sochain.com/api/v2/get_price/BTC/USD',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.ethInfo = res.data
				// 	}
				// })

				// uni.request({
				// 	// url: 'https://apiv2.bitcoinaverage.com/indices/global/ticker/LTCUSD',
				// 	url: 'https://sochain.com/api/v2/get_price/BTC/USD',
				// 	method: 'GET',
				// 	success: (res) => {
				// 		this.ltcInfo = res.data
				// 	}
				// })
			},

			// 模拟生命周期
			onComponentReady() {
				console.log('home ready')
				if (!this.getCoinInfoTimer) {
					this.getCoinInfoTimer = setInterval(this.getCoinInfo, this.updateCoinInfoInterval)
				}
			},

			onComponentHide() {
				console.log('home hide')
				if (this.getCoinInfoTimer) {
					clearInterval(this.getCoinInfoTimer)
				}
			},
			onComponentShow() {
				console.log('home show')
				if (!this.getCoinInfoTimer) {
					this.getCoinInfoTimer = setInterval(this.getCoinInfo, this.updateCoinInfoInterval)
				}
			},
		}
	}
</script>

<style>
	.bw_index {
		flex-direction: column;
	}

	.swiper-box {
		display: flex;
		height: 210px;
	}

	.index_top_bg {
		flex: 1;
		height: 210px;
		background: #f8f8fd;
	}

	.home-top-card {
		height: 182px;
		margin: 14px 26px;
		border-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0 0 14px #eae7ec;
	}

	.htc-info-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70px;
		padding: 0 10px;
	}

	.htc-coin-desc {
		display: flex;
		align-items: center;
	}

	.htc-coin-desc>image {
		padding: 2px;
		width: 50px;
		height: 50px;
	}

	.htc-coin-name-text,
	.htc-coin-quotation {
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.htc-coin-name-text {
		margin-left: 8px;
	}

	.htc-coin-quotation {
		/* margin-right: 8px; */
		text-align: right;
	}

	.quotation-increase {
		color: #4CD964;
	}

	.quotation-decrease {
		color: #DD524D;
	}

	.quotation-change-percentage {
		display: inline-block;
		text-align: center;
		width: 70px;
		margin-left: 10px;
		border-radius: 6px;
		color: #FFFFFF;
		background-color: #aeacb0;
	}

	.quotation-increase .quotation-change-percentage {
		background-color: #4CD964;
	}

	.quotation-decrease .quotation-change-percentage {
		background-color: #DD524D;
	}

	.quotation-arrow {
		position: relative;
		float: right;
		padding-left: 10px;
	}

	.quotation-arrow-top {
		position: absolute;
		left: -1px;
		top: 3px;
		width: 0;
		height: 0;
		border-bottom: 5px solid #000000;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
	}

	.quotation-arrow-body {
		position: absolute;
		top:8px;
		left: 1px;
		width: 4px;
		height: 9px;
	}
	
	.quotation-increase .quotation-arrow-body{
		background-color: #4CD964;
	}
	
	.quotation-increase .quotation-arrow-top{
		border-bottom-color: #4CD964;
	}
	
	.quotation-decrease .quotation-arrow-body{
		background-color: #DD524D;
	}
	
	.quotation-decrease .quotation-arrow-top{
		border-bottom-color: #DD524D;
	}

	.htc-coin-quotation>text:first-child {
		font-weight: 600;
	}

	text.price-up {}

	text.price-down .htc-coin-name-text>text {
		font-weight: 600;
	}

	.text-mini {
		font-size: 12px;
	}

	.text-small {
		font-size: 14px;
	}

	.text-medium {
		font-size: 16px;
	}
</style>
